.layout {
  min-height: 100vh;
}

.header {
  background: #fff;
  padding: 0 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 10;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.headerLeft {
  display: flex;
  align-items: center;
  gap: 110px;
}

.logo {
  height: 32px;
}

.headerRight {
  display: flex;
  align-items: center;
  gap: 28px;
}

.trialButton {
  border-radius: 5px;
  height: 36px;
  padding: 0 16px;
}

.vipButton {
  background: #ff7d00;
  border-color: #ff7d00;
  border-radius: 5px;
  height: 36px;
  padding: 0 16px;
}

.notificationIcon {
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}

.sider {
  width: 180px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  margin-top: 80px;
}

.menu {
  height: 100%;
  border-right: 0;
  background: #fafafc;
  padding-top: 16px;
}

.menu :global(.ant-menu-item-selected) {
  color: #ff7d00 !important;
  background-color: white !important;
}

.menu :global(.ant-menu-item-selected::after) {
  border-right-color: #ff7d00 !important;
}

.menu :global(.ant-menu-item:hover) {
  color: #ff7d00 !important;
  background-color: white !important;
}

.designTip {
  padding: 16px;
  color: #666;
  font-size: 14px;
}

.content {
  background: #fff;
  padding: 24px 24px 24px 224px;
  margin: 0;
  min-height: 280px;
  /* background: linear-gradient(45deg, transparent 33.33%, rgba(57, 144, 179, 0.1) 33.33%, rgba(0, 0, 0, 0.1) 66.66%, transparent 66.66%), lightblue;
  background-size: 20px 20px; */
}